<template>
	<view class="comment-bar">
		<view class="comment">
			<view class="uni-form-item uni-column">
				<input class="uni-input" name="content" v-model="inputContent" placeholder="发布评论" auto-blur="true" confirm-type="send" @confirm="commentSubmit"/>
			</view>
		</view>
		<view class="favorites" @click="favorites()">
			<view class="icon">
				<template v-if="favoritesYesNo">
					<text class="iconfont active">&#xe6d2;</text>
				</template>
				<template v-else>
					<text class="iconfont">&#xe635;</text>
				</template>
			</view>
			<text>收藏</text>
		</view>
		<view class="support" @click="support()">
			<view class="icon">
				<template v-if="supportYesNo">
					<text class="iconfont active">&#xe6d4;</text>
				</template>
				<template v-else>
					<text class="iconfont">&#xe6d5;</text>
				</template>
			</view>
			
			<text>赞</text>
		</view>
		<!--登录框-->
		<Login ref="login" :config="config"/>
	</view>
</template>

<script>
	export default {
		name: 'Comment',
		props: {
			config: {
				type: Object,
				default: {},
			},
			data: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				inputContent: '',
				favoritesYesNo: this.data.favorites_yesno,
				supportYesNo: this.data.support_yesno
			}
		},
		
		methods: {
			/**
			 * 提交评论
			 * @param {Object} e
			 */
			commentSubmit: function(e){

				let that = this
				let content = e.detail.value
				let data = {}
					data.article_id = this.data.id
					data.content = content
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/article'
					data.action = 'comment_add'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/comment'
					data.m = 'muu_classroom_plugin_article'
					data.action = 'add'
					//#endif
				this.util.request({
					url : url,
					data : data,
					method: 'POST',
					success: function (res) {
						if (res.data.code == 200) {
							console.log(res.data)
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000,
								success: function(){
									that.inputContent = ''
									// 隐藏软键盘
									uni.hideKeyboard()
									that.$emit("getCommnetList",1)
								}
							});
							
						}else{
							if(res.data.msg == '需要登录'){
								//触发登录框
								that.$refs.login.loginDialog()
							}else{
								uni.showToast({
								    title: res.data.msg,
								    duration: 2000
								});
							}
						}
					}
				})
				
			},
			favorites: function(){
				console.log(this.favoritesYesNo)
				let that = this
				
				let data = {}
					data.action = 'favorites_edit'
					data.m = 'muu_classroom'
					data.article_id = this.data.id
				this.util.request({
					url : 'entry/wxapp/article',
					data : data,
					method: 'POST',
					success: function (res) {
						if (res.data.code == 200) {
							console.log(res.data)
							if(res.data.data == 1){
								that.favoritesYesNo = 1
							}else{
								that.favoritesYesNo = 0
							}
						}else{
							if(res.data.msg == '需要登录'){
								//触发登录框
								that.$refs.login.loginDialog()
							}
						}
					}
				})
			},
			support: function(){
				console.log(this.supportYesNo)
				let that = this
				
				let data = {}
					data.action = 'support_edit'
					data.m = 'muu_classroom'
					data.article_id = this.data.id
				this.util.request({
					url : 'entry/wxapp/article',
					data : data,
					method: 'POST',
					success: function (res) {
						if (res.data.code == 200) {
							console.log(res.data)
							if(res.data.data == 1){
								that.supportYesNo = 1
							}else{
								that.supportYesNo = 0
							}
						}else{
							if(res.data.msg == '需要登录'){
								//触发登录框
								that.$refs.login.loginDialog()
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.comment-bar {
		position: fixed;
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: #fff;
		display: flex;
		border-top:2rpx solid #f4f6f7!important;
		font-size: 24rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		.comment {
			flex: 1;
			padding: 16rpx;
			.uni-input {
				margin: 0;
				height: 64rpx;
				background-color: #f2f2f2;
				border-radius: 32rpx;
				border: 2px solid #eee;
				font-size: 24rpx;
				padding: 0 20rpx;
			}
		}
		.favorites {
			width: 120rpx;
			padding: 16rpx;
			text-align: center;
			.icon {
				.iconfont {
					font-size: 32rpx;
				}
				.iconfont.active {
					color: #f90;
				}
			}
		}
		.support {
			width: 120rpx;
			padding: 16rpx;
			text-align: center;
			.icon {
				.iconfont {
					font-size: 24rpx;
				}
				.iconfont.active {
					color: #f90;
				}
			}
		}
	}

</style>
